/**
 * 新增修改租户
 */
<template>
    <vp-dialog ref="editDialogRef" :span="1">
        <template #title>
            <vp-label v-if="type == 'add'" zh="新增" en="Add" align="left"/>
            <vp-label v-else zh="修改" en="Edit" align="left"/>
        </template>
        <el-form label-suffix=":" v-loading="loading"  :model="formData" :rules="formRules" ref="formRef" label-width="120px">
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="dprtcode">
                        <template #label><vp-label zh="编码" en="Code"/></template>
                        <el-input v-model="formData.dprtcode"  v-trim  :disabled="type==='edit'" maxlength="50"></el-input>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item prop="dprtname">
                        <template #label><vp-label zh="名称" en="Name"/></template>
                        <el-input v-model="formData.dprtname"   v-trim  maxlength="100"></el-input>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item >
                        <template #label><vp-label zh="有效期" en="Valid Date"/></template>
                        <el-date-picker
                            v-model="formData.deptinfo.yxqDateRange"
                            type="daterange"
                            start-placeholder="开始日期/Start Date"
                            end-placeholder="结束日期/End Date"
                            unlink-panels
                            value-format="YYYY-MM-DD"
                            class="w100"
                            @change="handleYxqDateRangeChange"
                        >
                        </el-date-picker>
                    </el-form-item>
                </vp-col>
                <!-- <vp-col :span="1">
                    <el-form-item prop="zcfjMax">
                        <template #label><vp-label zh="飞机数量" en="Aircraft Number"/></template>
                        <el-input  v-model="formData.deptinfo.zcfjMax"  v-trim ></el-input>
                    </el-form-item>
                </vp-col> -->
                <vp-col :span="1">
                    <el-form-item  prop="zczhMax">
                        <template #label><vp-label zh="账号数量" en="User Num"/></template>
                        <el-input  v-model="formData.deptinfo.zczhMax" v-trim ></el-input>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item >
                        <template #label><vp-label zh="附件容量" en="Storage Limit"/></template>
                        <el-input v-model.trim="formData.deptinfo.fjrl"  v-trim >
                            <template #append>
                                <el-select v-model="formData.deptinfo.rldw" style="width:70px">
                                    <el-option label="M" :value=1></el-option>
                                    <el-option label="G" :value=2></el-option>
                                    <el-option label="T" :value=3></el-option>
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                </vp-col>
            </el-row>
        </el-form>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave"/>
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="systemTenantEdit">
import { ref} from 'vue'
import request from '/@/utils/request';
import validateUtils from '/@/utils/validateUtils'

    const emits = defineEmits(['formSubmited']);

    const formData = ref({
        id:"",
        dprtcode:"",
        dprtname:"",
        parentid:"",
        deptinfo: {
            yxqDateRange:[] as string[],
            yxqks:"",
            yxqjs:"",
            zcfjMax:null,
            zczhMax:null,
            fjrl:"",
            rldw:2,
        },
    });
    const formRules = {
        dprtcode:[ 
            validateUtils.notNull,
            validateUtils.notChinese
        ],
        dprtname: [
            validateUtils.notNull
        ]
    }

    const loading = ref(false);
    const saveLoading = ref(false);
    const roleLoading = ref(false);
    const type = ref('add');
    const editDialogRef = ref();

    const handleYxqDateRangeChange = (value: string[])=>{
        formData.value.deptinfo.yxqks = value[0],
        formData.value.deptinfo.yxqjs = value[1]
    }
    const formRef = ref();

    const initFormData = ()=>{
        formData.value = {
            id:"",
            dprtcode:"",
            dprtname:"",
            parentid:"",
            deptinfo: {
                yxqDateRange:[] as string[],
                yxqks:"",
                yxqjs:"",
                zcfjMax:null,
                zczhMax:null,
                fjrl:"",
                rldw:2,
            },
        }
    }


    const handleOpen = (id: string, __type: string)=>{
        type.value = __type;
        initFormData();
        editDialogRef.value.handleOpen();
        if(__type === 'edit'){
            loading.value = true;
            request.get(`/system/tenant/${id}`).then((res)=>{
                formData.value = {
                    ...formData.value,
                    ...res.data
                };
                formData.value.deptinfo.yxqDateRange = [
                    formData.value.deptinfo.yxqks,
                    formData.value.deptinfo.yxqjs
                ]
                loading.value = false;
            })
        }else{
            formData.value.parentid = id;
        }
    }

        const handleSave = () => {
            if(loading.value){
                return;
            }
            saveLoading.value = true;
            formRef.value.validate((valid: Boolean)=>{
                if(valid){
                    request.post("/system/tenant", {
                        department: formData.value
                    }).then(()=>{
                        emits("formSubmited");
                        editDialogRef.value.handleClose();
                    }).finally(()=>{
                        saveLoading.value = false;
                    })
                }else{
                    saveLoading.value = false;
                }
			})
        }

        defineExpose({
            handleOpen,
        })

</script>
